<!-- 登录页面 -->
<template>
    <div>
    <div id="outDiv">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="身份证号码:" prop="UerName">
          <el-input v-model.number="ruleForm.UerName"></el-input>
        </el-form-item>
  
       <div id="chooseBtn">
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            style="width: 10vw;"
            >登录</el-button>
        </el-form-item>
  
        <el-form-item>
          <el-button
            type="primary"
            @click="register"
            style="width: 10vw;"
            >返回</el-button>
        </el-form-item>
      </div>
      </el-form>
    </div>
    <Special/>
  </div>
  </template>
  <script>
  import { mapState } from 'vuex';
import Special from '../../components/Special/special.vue';
  export default {
    computed:{
        ...mapState(["userInfo.cardNumber"])
    },
    components: { Special, Special },
    data() {
      var checkName = (rule, value, callback) => {//判断用户名字
        if (!value) {
          return callback(new Error("身份证信息不能为空"));
        }
        setTimeout(() => {
          if (String(value).length < 13&&!Number.isInteger(value)) {
            callback(new Error("身份证信息错误！！"));
          } else {
            callback();
          }
        }, 500);
      };
      return {
        user: this.$store.state.userInfo,
        idIdex:0,
        ruleForm: {
          pass: "",
          checkPass: "",
          UerName: "",
        },
        rules: {
          UerName: [{ validator: checkName, trigger: "blur" }],
        },
      };
    },
    methods: {
      register(){//跳转到注册页面
          this.$router.go(-1)
      },
      submitForm(formName) {//提交数据
        let nweThis=this.ruleForm
        let abc=Array.from(this.user).some(item=>{//判断用户是否存在
          return item.cardId==nweThis.UerName
        })
        Array.from(this.user).forEach((item,index)=>{
          if(item.cardId==nweThis.UerName){
              this.idIdex=index
          }
        })
        this.$refs[formName].validate((valid) => {
          if (valid&&abc) {
            this.$router.push({ "name": "info",query:{"cardid":this.ruleForm.UerName}});
            this.$notify({
              title: "成功",
              message: `欢迎你！${this.user[this.idIdex].userName}`,
              type: "success",
              duration:1000
            });
          } else {
            this.$notify.error({
              title: "错误",
              message: "身份证账号不正确！！！",
              duration:1000
            });
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
    #outDiv{
     float: left;
     position: absolute;
     left: 50%;
     top: 55%;
     transform: translate(-50%,-50%);
    }
    #chooseBtn {
    width: 35vw;
    display: flex;
    justify-content: center;
  }
  </style>
